<template>
  <el-container class="home-container">
    <el-header>
      <div>
        <span>电商后台管理系统</span>
      </div>
      <el-button type="info" @click="logout">退出</el-button>
    </el-header>
    <el-container>
      <el-aside :width="isCollapse ? '' : '200px'">
        <div class="menu-collapse-box" @click="isCollapse = !isCollapse">
          <i v-show="isCollapse" class="el-icon-s-unfold"></i>
          <i v-show="!isCollapse" class="el-icon-s-fold"></i>
        </div>
        <el-menu
          ref="menuRef"
          :default-active="hashUrl"
          background-color="#333744"
          text-color="#fff"
          active-text-color="#409EFF"
          style="border-right: none;"
          :unique-opened="true"
          :collapse="isCollapse"
          :collapse-transition="false"
          :router="true"
        >
          <el-submenu :key="v.id" v-for="v in menuList" :index="v.path">
            <template #title>
              <span>{{ v.authName }}</span>
            </template>
            <el-menu-item
              :key="child.id"
              v-for="child in v.children"
              :index="`/${child.path}`"
              >{{ child.authName }}</el-menu-item
            >
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      menuList: [
        {
          id: 1,
          authName: '我的店铺',
          path: 'shop',
          children: [
            { id: 11, authName: '店铺基本信息', path: 'welcome' },
            { id: 12, authName: '店铺风格管理', path: 'shopStyle' },
            { id: 13, authName: '店铺权益', path: 'shopRights' }
          ]
        },
        {
          id: 2,
          authName: '商品管理',
          path: 'goods',
          children: [
            { id: 21, authName: '优惠卷管理', path: 'goodsCard' },
            { id: 22, authName: '活动设置', path: 'goodsActivity' },
            { id: 23, authName: '商品列表', path: 'goodsList' }
          ]
        },
        {
          id: 3,
          path: 'order',
          authName: '订单管理',
          children: [{ id: 31, authName: '订单列表', path: 'orderList' }]
        },
        {
          id: 4,
          authName: '财务管理',
          path: 'finance',
          children: [
            { id: 41, authName: '店铺账户', path: 'shopAccount' },
            { id: 42, authName: '账户明细', path: 'shopDetails' }
          ]
        },
        {
          id: 5,
          authName: '素材库管理',
          path: 'material',
          children: [
            { id: 51, authName: '我的素材库', path: 'myMaterial' },
            { id: 52, authName: '素材商城', path: 'materialShop' }
          ]
        }
      ],
      isCollapse: false,
      hashUrl: '',
      closeURL: 'goods'
    }
  },
  // computed: {
  //   hashUrl() {
  //     console.log('hashUrl is changed...')
  //     return location.hash.slice(1)
  //   }
  // },
  methods: {
    async logout() {
      const istrue = await this.$confirm('您确定要退出当前用户吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (istrue !== 'confirm') return null
      window.sessionStorage.removeItem('LOGIN_TOKEN')
      this.$router.push('/login')
      this.$message('退出成功')
    }
    // getCloseURL() {
    //   // 获取当前二级菜单路由
    //   const url = location.hash.slice(2) || this.hashUrl
    //   console.log(url, 'url')
    //   const curSubMenu = this.menuList.find(v => {
    //     const vc = v.children.find(child => {
    //       if (child.path === url) return child
    //     })
    //     if (vc) {
    //       return v
    //     }
    //   })
    //   this.closeURL = curSubMenu.path
    //   console.log(curSubMenu, 'curSubMenu')
    //   console.log(this.closeURL, 'this.closeURL')
    // }
  },
  mounted() {
    this.hashUrl = location.hash.slice(1)
  },
  updated() {
    this.hashUrl = location.hash.slice(1)
  }
}
</script>

<style lang="less" scoped>
html {
  height: 100%;
}
.el-header {
  background-color: #373d41;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  > div {
    display: flex;
    align-items: center;
    > span {
      margin-left: 15px;
      font-size: 24px;
    }
  }
}
.el-aside {
  background-color: #333744;
}

.el-main {
  background-color: #eaedf1;
}

.home-container {
  height: 100%;
}

.menu-collapse-box {
  color: #fff;
  text-align: center;
  height: 50px;
  line-height: 50px;
  cursor: pointer;
  &:hover {
    background-color: #292c36;
  }
}
</style>
